<template>
  <view class="bigbox">
    <view class="onebox" style="width: 100%;height: 80rpx;">
      <u-tabs :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :list="list1" @change="clicktabs"></u-tabs>
    </view>
    <view class="twobox">
      <view class="istext" v-if="current==0">
        <view class="" style="margin-top: 20rpx; margin-bottom: 30rpx;">
          <u-search bgColor="#ffffff" placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
        </view>
        <view class="qbsh">
          批量审核
        </view>
        

        <view class="sqbox">
          <view class="sqboxleft">
            显示单位 -审核状态 -审核状态- 法人代表 -联系电话 -联系人- 剩下信息点进去展示
          </view>
          <view class="sqboxriht" @click="checkedchange=!checkedchange">
            <checkbox value="cb" :checked="checkedchange" />
          </view>
        </view>
      </view>
      <view class="istext" v-if="current==1">
        1
      </view>
      <view class="istext" v-if="current==2">
        2
      </view>
      <view class="istext" v-if="current==3">
        3
      </view>
    </view>


  </view>
</template>

<script>
  import mixins from '@/common/js/mixins';

  export default {
    mixins: [mixins],
    data() {
      return {
        checkedchange: false,
        current: 0,
        keyword: '',
        list1: [{
            name: '全部',
            index: '0',

          },
          {
            name: '待审核',
            index: '1',

          }, {
            name: '已通过',
            index: '2'
          }, {
            name: '已驳回',
            index: '3'
          }
        ]

      }

    },
    methods: {
      clicktabs(item) {
        this.current = item.index

      },
      changecheckbox(e) {

      },
    }
  }
</script>

<style lang="scss" scoped>
  .bigbox {
    width: 100%;
    height: calc(100vh - 90rpx);
    background: #F5F5F5;

    display: flex;
    flex-direction: column;
    align-items: center;

    .onebox {
      display: flex;
      justify-content: space-evenly;
      // justify-content: space-between;
    }

    .twobox {
      padding: 20rpx;
    }

    .istext {
      width: 100%;
      .qbsh{
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
        border: 1rpx solid skyblue;
        border-radius: 10rpx;
        text-align: center;
        // margin-top: 80rpx;
        float: right;
        margin-bottom: 30rpx;
      }
      .sqbox {
        display: flex;
        // justify-content: center;
        // align-items: center;
        width: 700rpx;
        height: 200rpx;
        background-color: #fff;
        border-radius: 20rpx;

        .sqboxleft {
          width: 600rpx;
          background-color: red;
        }

        .sqboxriht {
          width: 100rpx;
          // height: 44rpx;
          // border: 1rpx solid skyblue;
          // border-radius: 10rpx;
          // text-align: center;
          // margin-top: 80rpx;
          // margin-left: 50rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }

      }
    }

    /deep/ .u-tabs__wrapper__nav__item {
      padding: 0 20px;
    }
  }
</style>